<template>
	<div class="w100 h100 relative flex-col resources">
		<div class="header p-x-10 f-s-20 fw">资源库</div>
		<el-tabs tab-position="left" type="card" class="resources-tabs f1 h0">
			<el-tab-pane>
				<template #label>
					<my-icon icon="moxingguanli" class="f-s-20" />
					<span>模型</span>
				</template>
				<moxing />
			</el-tab-pane>
			<el-tab-pane>
				<template #label>
					<my-icon icon="dengguang" class="f-s-20" />
					<span>光源</span>
				</template>
				<dengguang />
			</el-tab-pane>
			<el-tab-pane>
				<template #label>
					<my-icon icon="texiao" class="f-s-20" />
					<span>特效</span>
				</template>
				特效
			</el-tab-pane>
			<el-tab-pane>
				<template #label>
					<my-icon icon="biaoji" class="f-s-20" />
					<span>标记</span>
				</template>
				标记
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import moxing from './resources/moxing.vue';
import dengguang from './resources/dengguang.vue';
</script>

<style lang="scss" scoped>
.resources {
	.header {
		height: 40px;
		line-height: 40px;
		background-color: var(--color-bg-2);
	}
	.resources-tabs {
		:deep() {
			.el-tabs__header {
				margin: 0;
				background-color: var(--color-bg-2);
			}
			.el-tabs__content {
				height: 100%;
				.el-tab-pane {
					width: 100%;
					height: 100%;
				}
			}
			.el-tabs__nav {
				border: 0 !important;
			}
			.el-tabs__item {
				border: 0 !important;
				padding: 0;
				width: 50px;
				height: 70px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.is-active {
				background: var(--color-bg-1);
			}
		}
	}
}
</style>
